import React, { Component } from 'react';
import { Modal, Input, InputNumber, Form, Select, Radio, Checkbox } from 'antd';
// import { createModel } from 'src/services/DataManage';
import { FormInstance } from 'antd/lib/form';

interface Iprops {
	modalVisibleValue:boolean
	eltData:any
	handleRouterTo:any
	modalVisible:any
	modelNodeData:any
	saveModel:any
	saving:boolean
}

const layout = {
	labelCol: { span: 6 },
	wrapperCol: { span: 18 },
};

const weekOptions = [
	{ label: '星期一', value: 1 },
	{ label: '星期二', value: 2 },
	{ label: '星期三', value: 3 },
	{ label: '星期四', value: 4 },
	{ label: '星期五', value: 5 },
	{ label: '星期六', value: 6 },
	{ label: '星期日', value: 7 }
];

class SaveModelModal extends Component<Iprops,any> {

		state = {
			jobType: null,
			cronData: null,
		};

		formRef = React.createRef<FormInstance>()		

		jobTypeChange = ( e ) => {
			this.setState( {
				jobType: e.target.value
			} );
		}
		
		handleOk = async () => {
			this.formRef.current.validateFields().then( async value => {
				const { jobType, dayOfMonths, dayOfWeeks, hour, minute, execute  } = value;
				const cronData = { jobType, dayOfMonths: dayOfMonths ? [ dayOfMonths ] : null, dayOfWeeks, hour, minute, second: 0 };
				let data = {
					'comments': value.comments,
					// 'cronExpression': value.cronExpression,
					'id': this.props.eltData.id,
					'name': value.name,
					// 'content': JSON.stringify( this.props.modelNodeData ),
					'cronData': cronData.jobType ? JSON.stringify( cronData ) : null,
				};
				//保存模型数据
				this.props.saveModel( data, execute );
			
				
			} );
			
		}
		
		
		UNSAFE_componentWillReceiveProps( nextProps ) {
			const cronData = nextProps.eltData.cronData ? JSON.parse( nextProps.eltData.cronData ) : null;
			if ( cronData && cronData.dayOfMonths && cronData.dayOfMonths.length ) {
				cronData.dayOfMonths = cronData.dayOfMonths[ 0 ];
			}
			if ( cronData ) {
				this.setState( {
					jobType: cronData.jobType,
					cronData: cronData,
				}, () => {
					if ( this.formRef.current ) {
						this.formRef.current.setFieldsValue( cronData );
					}
				} );
			}
		}

		render() {
			const taskConfig = [
				{
					name: 'jobType',
					label: '定时配置',
					hide: false,
					component: <Radio.Group onChange={ this.jobTypeChange }>
						{/* <Radio.Button value={0}>每分钟</Radio.Button> */}
						<Radio.Button value={4}>每小时</Radio.Button>
						<Radio.Button value={1}>每天</Radio.Button>
						<Radio.Button value={3}>每周</Radio.Button>
						<Radio.Button value={2}>每月</Radio.Button>
					</Radio.Group>
				},
				{
					name: 'dayOfMonths',
					label: '日期',
					hide: this.state.jobType !== 2,
					initialValue: 1,
					rules: [ { required: true, message: '请输入日期' } ],
					component: <InputNumber min={1} max={31} />
				},
				{
					name: 'dayOfWeeks',
					label: '星期几',
					hide: this.state.jobType !== 3,
					initialValue: [ 1 ],
					rules: [ { required: true, message: '请选择星期几' } ],
					component: <Select mode="multiple" allowClear>
						{
							weekOptions.map( item => {
								return (
									<Select.Option key={item.value} value={item.value}>{item.label}</Select.Option>
								);
							} )
						}
					</Select>
				},
				{
					name: 'hour',
					label: '小时点',
					hide: [ 0, 4, null ].includes( this.state.jobType ),
					initialValue: 1,
					rules: [ { required: true, message: '请输入小时点' } ],
					component: <InputNumber min={0} max={23} />
				},
				{
					name: 'minute',
					label: '分钟点',
					hide: this.state.jobType < 1,
					initialValue: 0,
					rules: [ { required: true, message: '请输入分钟点' } ],
					component: <InputNumber min={0} max={59} />
				},
				/* {
					name: 'second',
					label: '秒数',
					hide: this.state.jobType === null,
					initialValue: 0,
					rules: [ { required: true, message: '请输入秒数' } ],
					component: <InputNumber min={0} max={59} />
				}, */
			];
			
			return (
				<Modal visible={this.props.modalVisibleValue}
					onCancel={() => this.props.modalVisible( 'saveModalVisible', false )}
					onOk={ this.handleOk } mask={false} maskClosable={false}
					okButtonProps={ { disabled: this.props.saving } }
					cancelButtonProps={{ disabled: this.props.saving }}
					okText="确定"
					cancelText="取消"
					title="保存">
					<Form ref={this.formRef} initialValues={{ ...this.props.eltData }} {...layout} >
						<Form.Item label="数据整理名称" name="name">
							<Input/>
						</Form.Item>
						<Form.Item label="描述" name="comments">
							<Input/>
						</Form.Item>
						{/* <Form.Item label="表达式" name="cronExpression">
							<Input/>
						</Form.Item> */}
						{
							taskConfig.map( ( v, i ) => {
								return v.hide ? null : (
									<Form.Item label={ v.label } name={ v.name } initialValue={ v.initialValue } rules={ v.rules } key={ `job${i}` }>
										{ v.component }
									</Form.Item>
								);
							} )
						}

						<Form.Item label="执行" name="execute" valuePropName="checked">
							<Checkbox>是否立即执行</Checkbox>
						</Form.Item>
					</Form>
				</Modal>
			);
		}
}

export default SaveModelModal;